import React from "react";
import { Result } from "antd";

import "./index.less";
import { StyledAgree } from "@/components/button";
import { ContentBorder } from "@/components/page-padding";

interface CustomResultProps {
  icon: string;
  resultTitle: string;
  resultSubTitle: string;
  extra?: React.ReactNode;
  btnText: string;
  onClick?: () => void;
}
const CustomResult: React.FC<CustomResultProps> = (props) => (
  <div className="custom-result">
    <ContentBorder>
      <Result
        className="result"
        icon={<img className="top-img" src={props.icon} alt="png" />}
        title={<span className="result-title">{props.resultTitle}</span>}
        subTitle={<div className="result-subtitle">{props.resultSubTitle}</div>}
        extra={[
          <>{props.extra}</>,
          <StyledAgree
            key="btn"
            onClick={props.onClick}
            className="next-button"
          >
            {props.btnText}
          </StyledAgree>,
        ]}
      />
    </ContentBorder>
  </div>
);

export default CustomResult;
